<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JM航空</title>
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="../static/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../static/font/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/index.css"/>
</head>
<body>
<div id="appUser">
    <el-menu mode="horizontal" :default-active="activeIndex" active-text-color="#409EFF">
        <el-menu-item index="0" id="logo">JM航空&nbsp;&nbsp;&nbsp; <span
                class="fa fa-plane fa-2x"></span></el-menu-item>
        <el-menu-item index="1"><a href="">机票预订</a></el-menu-item>
        <el-menu-item index="2"><a href="searchFlight.html">航班查询</a></el-menu-item>
        <el-menu-item id="user" index="3">
            <img class="el-tooltip" src="../static/image/flag.png"/>
            <el-dropdown>
                <span class="el-dropdown-link">{{userChName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a href="userCenter.html">我的订单</a>
                    </el-dropdown-item>
                    <el-dropdown-item><a href="https://github.com/Xiant999/AirSystem" target="_blank">GitHub</a>
                    </el-dropdown-item>
                    <el-dropdown-item divided><a href="/AirSystem_war_exploded/logout">退出</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu-item>
    </el-menu>

    <div id="main">
        <el-col>
            <el-card shadow="always">
                <el-steps :active="activeStep" finish-status="success" align-center>
                    <el-step title="Step1" description="选择航班"></el-step>
                    <el-step title="Step2" description="填写订单"></el-step>
                    <el-step title="Step3" description="确认并支付"></el-step>
                    <el-step title="Step4" description="出票成功"></el-step>
                </el-steps>
            </el-card>
        </el-col>


        <el-col>
            <el-card shadow="always">
                <div class="myCard">
                    <el-row type="flex">
                        <el-col :span="1">
                            <div class="fa fa-lg" id="plane"><img
                                    src="../static/image/logo.png"/>
                            </div>
                            {{InfoOfFlight.flightsId}}
                        </el-col>

                        <el-col :span="1" :push="2">
                            <div class="fa fa-lg" id="upPlane"><img
                                    src="../static/image/upPlane.png"/>
                            </div>
                        </el-col>

                        <el-col :span="2" :push="2">
                            <span class="fa fa-lg">{{InfoOfFlight.preUpTime | timeFilter}}</span><br>
                            <span class="fa fa-1x">{{InfoOfFlight.airportUpName}}</span>
                        </el-col>
                        <!--虚线-->
                        <el-col :span="3" :push="2">
                            <div class="dotLine">{{InfoOfFlight.planTime|sumTimeFilter}}</div>
                        </el-col>

                        <el-col :span="1" :push="3">
                            <div class="fa fa-lg" id="downPlane"><img
                                    src="../static/image/downPlane.png"/>
                            </div>
                        </el-col>
                        <el-col :span="2" :push="3">
                            <span class="fa fa-lg">{{InfoOfFlight.preDownTime | timeFilter}}</span><br>
                            <span class="fa fa-1x">{{InfoOfFlight.airportDownName}}</span>
                        </el-col>

                        <el-col :span="2" :push="4">
                            <el-tag type="success" size="x-large">{{InfoOfFlight.flightsMeals}}</el-tag>
                        </el-col>

                        <el-col :span="2" :push="4">
                            <el-tag type="warning" size="x-large">{{selectTicket.spaceName}}</el-tag>
                        </el-col>
                    </el-row>

                    <el-row style="height: 20px;"></el-row>
                    <div class="splitLine"></div>
                    <el-row style="height: 20px;"></el-row>


                    <!--step 2-->
                    <div v-show="activeStep==1">
                        <el-row type="flex" class="passCard">
                            <el-col :span="5">
                                <i class="fa fa-lg fa-address-card-o" aria-hidden="true"></i>&nbsp;常用乘机人
                            </el-col>
                            <el-col :span="2" :offest="1"
                                    v-for="tag in userPass"
                                    :key="tag.userpassId">
                                <el-button size="mini "
                                           type="primary" plain
                                           @click="insertUserPass(tag)">
                                    {{tag.userpassName}}
                                </el-button>
                            </el-col>
                        </el-row>

                        <el-row type="flex" class="passCard">
                            <el-col :span="5">
                                <i class="fa fa-lg fa-address-card" aria-hidden="true"></i>&nbsp;已选乘机人(最多5位)
                            </el-col>
                            <el-col :span="2" :offest="1"
                                    v-for="tag in orderPass"
                                    :key="tag.passengerId">
                                <el-tag type="warning"
                                        size="medium "
                                        closable
                                        @close="handleClose(tag)">
                                    {{tag.passengerName}}
                                </el-tag>
                            </el-col>
                        </el-row>

                        <div class="splitLine"><br></div>

                        <el-row>
                            <el-form :model="selectPass"
                                     :rules="rules" ref="selectPass" label-width="150px" status-icon
                                     class="inputForm2">
                                <el-form-item label="乘机人信息" style="font-size: larger;color: #303133"></el-form-item>
                                <el-form-item label="乘客类型" prop="passengerTyep" required>
                                    <el-radio-group v-model="selectPass.passengerTyep">
                                        <el-radio label="成人">成人(>12岁)</el-radio>
                                        <el-radio label="儿童">儿童(2~12周岁)</el-radio>
                                        <el-radio label="婴儿">婴儿(14天~2周岁)</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item label="姓名" prop="passengerName" required>
                                    <el-input v-model="selectPass.passengerName"></el-input>
                                </el-form-item>

                                <el-form-item label="身份证件" required>
                                    <el-row type="flex">
                                        <el-col :span="8">
                                            <el-form-item prop="passengerCertype">
                                                <el-select placeholder="请选择证件类型" v-model="selectPass.passengerCertype">
                                                    <el-option v-for="item in types"
                                                               :key="item.value"
                                                               :label="item.label"
                                                               :value="item.label"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="2" style="width: 20px">&nbsp;&nbsp;-&nbsp;&nbsp;</el-col>
                                        <el-col :span="15">
                                            <el-form-item prop="passengerCerid">
                                                <el-input v-model="selectPass.passengerCerid"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>

                                <el-form-item label="手机号码" prop="passengerTel">
                                    <el-input v-model="selectPass.passengerTel"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="submitPass('selectPass')">添加</el-button>
                                    <el-button @click="resetForm('selectPass')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-row>

                        <div class="splitLine"><br></div>

                        <el-row>
                            <el-form :model="order"
                                     :rules="rules" ref="order" label-width="150px" status-icon
                                     class="inputForm2">
                                <el-form-item label="联系人信息" style="font-size: larger;color: #303133"></el-form-item>
                                <el-form-item label="姓名" prop="orderContactName" required>
                                    <el-input v-model="order.orderContactName"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码" prop="orderContactTel" required>
                                    <el-input v-model="order.orderContactTel"></el-input>
                                </el-form-item>
                                <el-form-item label="Email" prop="orderContactEmail">
                                    <el-input v-model="order.orderContactEmail"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button @click="stepPre()">重新选择航班</el-button>
                                    <el-button type="primary" @click="stepNext('order')">下一步</el-button>
                                </el-form-item>

                            </el-form>
                        </el-row>
                    </div>

                    <!--step 3-->
                    <div v-show="activeStep==2">
                        <el-row>
                            <div class="fa fa-2x">订单信息</div>
                        </el-row>
                        <br>
                        <hr>
                        <el-row><i class="fa fa-lg fa-address-book-o"></i>&nbsp;乘机人信息</el-row>
                        <el-row>
                            <el-table :data="orderPass"
                                      style="width: 80%;margin-top: 20px"
                                      max-height="500">
                                <el-table-column label="乘客类型"
                                                 width="100"
                                                 sortable
                                                 prop="passengerTyep"
                                                 align="center">
                                </el-table-column>

                                <el-table-column label="姓名"
                                                 width="200"
                                                 align="center">
                                    <template slot-scope="scope">
                                        <b>{{scope.row.passengerName}}</b>
                                    </template>
                                </el-table-column>

                                <el-table-column label="证件信息"
                                                 width="300">
                                    <template slot-scope="scope">
                                        {{scope.row.passengerCertype}}&nbsp;{{scope.row.passengerCerid}}
                                    </template>
                                </el-table-column>

                                <el-table-column label="手机号码"
                                                 width="300"
                                                 prop="passengerTel">
                                </el-table-column>
                            </el-table>
                        </el-row>

                        <br><br><br>
                        <hr>
                        <el-row><i class="fa fa-lg fa-id-badge"></i>&nbsp;联系人信息</el-row>
                        <el-row>
                            <el-table :data="contactPeo"
                                      style="width: 80%;margin-top: 20px"
                                      max-height="500">
                                <el-table-column label="姓名"
                                                 width="200"
                                                 prop="orderContactName">
                                </el-table-column>

                                <el-table-column label="手机号码"
                                                 width="300"
                                                 prop="orderContactTel">
                                </el-table-column>

                                <el-table-column label="Email"
                                                 width="300"
                                                 prop="orderContactEmail">
                                </el-table-column>
                            </el-table>
                        </el-row>
                        <br><br><br>
                        <hr>
                        <el-row><i class="fa fa-lg fa-id-badge"></i>&nbsp;订单信息</el-row>
                        <br><br>
                        <el-row><i class="fa fa-lg"></i>订单编号:{{orderInfo.orderId}}</el-row>
                        <el-row>
                            <el-table :data="orderInfo.tickets"
                                      style="width: 80%;margin-top: 20px"
                                      max-height="500" show-summary>
                                <el-table-column label="姓名"
                                                 width="100"
                                                 prop="passengerName">
                                </el-table-column>

                                <el-table-column label="机票价格"
                                                 width="150"
                                                 prop="ticketPrice">
                                </el-table-column>

                                <el-table-column label="机场建设费（元）"
                                                 width="150" prop="airportFee">
                                    <template slot-scope="scope">
                                        +{{scope.row.airportFee}}
                                    </template>
                                </el-table-column>

                                <el-table-column label="燃油税（元）"
                                                 width="150" prop="fuelSurcharge">
                                    <template slot-scope="scope">
                                        +{{scope.row.fuelSurcharge}}
                                    </template>
                                </el-table-column>

                                <el-table-column label="支付总额"
                                                 width="200" prop="sumPrice">
                                    <template slot-scope="scope">
                                        <b style="color: #6f7df5;">{{scope.row.sumPrice}}</b>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-row>

                        <br><br><br>
                        <hr>
                        <el-row><i class="el-icon-warning"></i>&nbsp;请再次确认密码</el-row>
                        <br><br>
                        <el-row>
                            <el-form :model="auth" label-width="80px" status-icon ref="auth"
                                     style="margin-right: 50%">
                                <el-form-item prop="authPassword"
                                              :rules="[{ required: true, message: '请再次确认密码',trigger: 'blur'}]"
                                              label="密码">
                                    <el-input type="password" prefix-icon="el-icon-ump-mima"
                                              v-model="auth.authPassword"
                                              auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button class="btn" type="primary" @click="activeStep--">返回
                                    </el-button>
                                    <el-button class="btn" type="primary" @click="cancelOrder()">取消订单
                                    </el-button>
                                    <el-button class="btn" type="primary" @click="postOrder('auth')">确认支付
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-row>
                    </div>

                    <!--step 4-->
                    <div v-show="activeStep==4">
                        <br><br><br>
                        <el-row><i class="fa fa-lg fa-id-badge"></i>&nbsp;订单信息</el-row>
                        <br>
                        <el-row style="color: #0d0606;">
                            <el-col><i class="fa fa-lg"></i>订单编号:{{orderInfo.orderId}}</el-col>
                            <el-col><i class="fa fa-lg"></i>订单提交时间:{{orderInfo.orderSureTime|timeStampFilter}}</el-col>
                        </el-row>
                        <el-row>
                            <el-table :data="orderArr"
                                      style="width: 80%;margin-top: 20px"
                                      max-height="500">
                                <el-table-column label="联系人"
                                                 width="100"
                                                 prop="orderContactName">
                                </el-table-column>
                                <el-table-column label="航班号"
                                                 width="100"
                                                 prop="flightsId">
                                </el-table-column>
                                <el-table-column label="出发"
                                                 width="200" prop="upAirportName">
                                </el-table-column>
                                <el-table-column label="到达"
                                                 width="200" prop="downAirportName">
                                </el-table-column>
                                <el-table-column label="乘客人数"
                                                 width="100" prop="orderNums">
                                </el-table-column>
                                <el-table-column label="支付总额"
                                                 width="200" prop="orderPrice">
                                    <template slot-scope="scope">
                                                            <span class="fa fa-lg fa-rmb"
                                                                  style="color: #f52c31;">{{scope.row.orderPrice}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>
                        <br><br>
                        <el-row><i class="fa fa-lg">机票详情</i></el-row>

                        <el-row>
                            <el-table :data="orderInfo.tickets"
                                      style="width: 80%;margin-top: 20px"
                                      max-height="500">
                                <el-table-column label="乘客人"
                                                 width="100" align="center"
                                                 prop="passengerName">
                                </el-table-column>
                                <el-table-column label="机票编号"
                                                 width="300"
                                                 prop="ticketId">
                                </el-table-column>
                                <el-table-column label="乘客电话"
                                                 width="200" prop="passengerTel">
                                </el-table-column>
                                <el-table-column label="座位号"
                                                 width="200" prop="orderNums">
                                    <template slot-scope="scope">
                                        <b>{{scope.row.spaceId}}-{{scope.row.ticketSeat}}</b>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </el-row>

                    </div>
                </div>
            </el-card>
        </el-col>
    </div>
</div>
<div class="footer">
    <el-container>
        <el-footer>
            <el-row :gutter="20">
                <el-col :span="10" :offset="10">
                    <div class="footer-inner">
                        <div class="copyright">&copy; 2019 &mdash; <span itemprop="copyrightYear">2020</span>
                            <span class="with-love">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </span>
                            <span class="author" itemprop="copyrightHolder">WYX & CZT</span>
                        </div>
                        <label style="margin-left: 0px;">整合SpringMVC + Mybatis + Shiro &mdash;
                            简易的航空票务系统</label>
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</div>
</body>
<script type="text/javascript" src="../static/vue/vue.js"></script>
<script type="text/javascript" src="../static/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../static/vue/vue-resource.js"></script>
<script type="text/javascript" src="../static/vue/vue-router.js"></script>
<script type="text/javascript" src="../static/js/orderNav1.js"></script>
</html>